<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-container>
        <el-header>
          <h1>我的故事</h1>
        </el-header>
        <el-main>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <div>
              <el-button class="button-top" size="small" type="primary" @click="handleEdit(true)">编辑</el-button>
              <div style="clear: both"></div>
            </div>

            <div class="description-title margin-top">自我描述</div>
            <div class="margin-top">
              <div v-if="!edit" v-html="form.myStory"></div>
              <editor v-if="edit" v-model="form.myStory" :min-height="192"/>
            </div>

            <div class="description-title margin-top">我的视频</div>

            <div>
              <video v-if="form.url !=='' && form.url !== null && !edit" :src="form.url" class="avatar video-avatar"
                     controls="controls">您的浏览器不支持视频播放
              </video>
            </div>

            <!-- action必选参数, 上传的地址 -->
            <el-upload v-if="edit" :action="uploadUrl" :before-upload="beforeUploadVideo"
                       :headers="headers" :on-progress="uploadVideoProcess" :on-success="handleVideoSuccess"
                       :show-file-list="false" class="avatar-uploader el-upload--text">
              <video v-if="form.url !=='' && videoFlag === false" :src="form.url" class="avatar"
                     controls="controls">您的浏览器不支持视频播放
              </video>
              <i v-else-if=" form.url ==='' && videoFlag === false" class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="videoFlag === true" :percentage="videoUploadPercent" style="margin-top:30px;"
                           type="circle"></el-progress>
            </el-upload>

          </el-form>
        </el-main>
        <el-footer>
          <el-button v-if="edit" class="button-save" size="small" type="primary" @click="handleSave">保存</el-button>
        </el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<script>
import {getMyStory, saveStory} from "@/api/publish/story/story";
import {getToken} from "@/utils/auth";

export default {
  components: {},
  name: "Story",
  data() {
    return {
      // 表单参数
      form: {},
      // 可编辑状态
      edit: false,
      // 表单校验
      rules: {},

      headers: {Authorization: "Bearer " + getToken()},
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      videoFlag: false, //是否显示进度条
      videoUploadPercent: 0, //进度条的进度，
      isShowUploadVideo: false, //
    }
  },
  created() {
    this.getStory();
  },
  methods: {

    // 查询自己的故事
    getStory() {
      getMyStory().then(response => {
        if (response && response.code === 200) {
          this.form = response.data;
        }
      })
    },

    // 编辑
    handleEdit(status) {
      this.edit = status;
    },

    // 保存
    handleSave() {
      const _this = this;
      saveStory(this.form).then(res => {
        if (res && res.code === 200) {
          _this.msgSuccess("保存成功");
          setTimeout(() => {
            _this.handleEdit(false);
          }, 1000);
        } else {
          _this.msgError("保存失败");
        }
      })
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        storyNumber: null,
        myStory: null,
        fileName: null,
        fileExt: null,
        fileSize: null,
        fileSizeStr: null,
        url: null,
        deptId: null,
        createBy: null,
        createById: null,
        createTime: null,
        updateBy: null,
        updateById: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },

    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 300;
      if (['video/mp4', 'video/flv', 'video/avi', 'video/wmv'].indexOf(file.type) === -1) {
        this.$message.error('请上传正确的视频格式');
        return false;
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过300MB哦!');
        return false;
      }
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0);
    },
    handleVideoSuccess(res, file) {
      //获取上传图片地址
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if (res.code === 200) {
        this.form.url = res.url;
        this.form.fileName = res.fileName;
      } else {
        this.$message.error('视频上传失败，请重新上传！');
      }
    },
  }
}
</script>

<style scoped>
.app-container {
  background: #F0F2F5;
}

.margin-top {
  margin-top: 20px;
}

.description-title {
  font-size: 16px;
  font-weight: bold;
}

.button-save {
  display: block;
  margin: 20px auto;
}

.button-top {
  display: block;
  float: right;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.video-avatar {
  margin-top: 20px;
  width: 50%;
  height: 50%;
  object-fit: fill;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
